<template>
	<div class="checkout">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="checkout-title">
			当前住房
		</div>
		<div class="sublet-wrap" v-for="(item,index) in subletArr" :key="index">
			<div class="sublet-left">
				<img :src="item.imgUrl" alt="">
			</div>
			<div class="sublet-right">
				<p>{{item.title}}</p>
				<p>{{item.pattern}}{{item.area}}m <sup>2</sup></p>
				<p><i class="iconfont icon-location"></i>{{item.address}}</p>
				<p>
					<span>{{item.mode}}</span>
					<span>{{item.price_month}}元/月</span>
				</p>
			</div>
		</div>
		<div class="checkoutMsg">
			<p :class="index==(itemArr.length-1)?'content-list':'content-list borderBot'" v-for="(item,index) in itemArr " :key="index">
				<span>{{item}}</span>
				<i class="iconfont icon-iconfontyoujiantou"></i>
			</p>
		</div>
		<div class="sublet-btn">登记成功</div>
	</div>
</template>
<script>
	import ShopHeader from "../../components/shopheader"
	export default{
		name:'checkout',
		data(){
			return{
				itemArr:[
					"姓名",
					"入住时间",
					"身份证件",
					"手机号"
				],
				subletArr:[
					{
						title:"东城区-安外大街四号院",
						pattern:"一室一厅一卫",
						area:44.0,
						address:"距5号线1088米",
						price_month:4800,
						mode:"整租",
						imgUrl:require("../../assets/images/mine/img_tu@2x.png")
					}
				],
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"办理退组",
					aimUrl:"/layout/mine",
					rightUrl:''
				}
			}
		},
		components:{
			ShopHeader
		}
	}
</script>
<style scoped lang="less">
	.checkout{
		width: 100%;
		background-color: #fff;
		// overflow: hidden;
		.top-zhanwei{
			width: 100%;
			height: 88 / 2 / 50rem;
		}
		.comment(){
			color: #333;
			font-size: 13 / 50rem;
			font-weight: 700;
		}
		.checkout-title{
			width: 100%;
			height: 40 / 50rem;
			line-height:  40 / 50rem;
			.comment();
			font-size: 15 / 50rem;
			padding-left: 20 / 2 / 50rem;
			box-sizing: border-box;
			box-shadow: 0 0  10 / 50rem 1 / 50rem rgba(0,0,0,0.1);
		}
		.sublet-wrap{
			width: 95%;
			margin: 20 / 2 / 50rem;
			height: 200 / 2 / 50rem;
			box-shadow: 0 0  10 / 50rem 1 / 50rem rgba(0,0,0,0.1);
			border-radius: 8 / 2 / 50rem;
			overflow: hidden;
			.sublet-left,.sublet-right{
				float: left;
				margin-top: 20 / 2 / 50rem;
				margin-left: 20 / 2 / 50rem;
			}
			.sublet-left{
				height: 160 / 2 / 50rem;
				width: 260 / 2 / 50rem;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.sublet-right{
				color: #333;
				font-size: 15 / 50rem;
				font-weight: 700;
				p{
					margin-bottom: 2 / 2 / 50rem;
				}
				p:nth-child(2){
					font-size: 13 / 50rem;
					font-weight: normal;
				}
				p:nth-child(3){
					font-size: 12 / 50rem;
					font-weight: normal;
					i{
						color: #f55;
					}
				}
				p:nth-child(4){
					color: #f55;
					font-weight: normal;
					margin-top: 15 / 2 / 50rem;
					position: relative;
					span:nth-child(1){
						font-size: 10 / 50rem;
						color: #618698;
						font-weight: normal;
						border: 1 / 50rem solid #618698;
						padding: 4 / 2 / 50rem 6 / 2 / 50rem;
						border-radius: 8 / 2 / 50rem;
					}
					span:nth-child(2){
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}
		}
		.checkoutMsg{
			width: 95%;
			margin: 20 / 50rem auto;
			box-shadow: 0 0 10 / 50rem 1 / 50rem rgba(0,0,0,.1);
			border-radius: 10 / 2 / 50rem;
			p.borderBot{
				border-bottom: 2 / 50rem solid rgba(0,0,0,.1);
			}
			.content-list{
				width: 100%;
				color: #333;
				font-size: 13 / 50rem;
				font-weight: 700;
				padding: 28 / 2 / 50rem 20 / 2 / 50rem;
				box-sizing: border-box;
				position: relative;
				i{
					color: #f55;
					font-size: 16 / 50rem;
					position: absolute;
					right: 0;
					top: 30 / 2 / 50rem
				}
			}
		}
		.sublet-btn{
			width: 90%;
			height: 44 / 50rem;
			background-color: #f55;
			color: #fff;
			font-size: 18 / 50rem;
			font-weight: 700;
			line-height: 44 / 50rem;
			text-align: center;
			margin: 44 / 50rem auto;
			border-radius: 5 / 50rem;
		}
	}
</style>